<template>
  <div>
    <div class="warnningTip">
      <i class="el-icon-warning-outline" /> {{ translate("nkypzfp") }}
    </div>
    <el-form
      ref="ruleForm"
      class="doumee-form"
      :rules="rulers"
      :model="param"
      label-width="auto"
      label-suffix="："
      @submit.native.prevent
    >
      <el-form-item :label="translate('spbcsc')">
        <el-input
          v-model="param.videoDuraton"
          oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
          type="text"
          class="mr10"
          disabled
          style="width: 200px"
        />
        <span class="placeholder9">{{ translate("dwtcggsc") }}</span>
      </el-form-item>
      <el-form-item :label="translate('chargeFlag')">
        <el-switch
          v-model="param.isCharge"
          active-value="1"
          inactive-value="0"
        />
        <span class="placeholder9 ml10">{{ translate("kqhhyy") }}</span>
      </el-form-item>
      <template v-if="param.isCharge == '1'">
        <el-form-item :label="translate('freeshiyong')" prop="trailDays">
          <el-input
            v-model="param.trailDays"
            oninput="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            type="text"
            class="mr10"
            style="width: 200px"
          />
          <span class="placeholder9 ml10">{{ translate("mfsyccff") }}</span>
        </el-form-item>
        <el-form-item :label="translate('xftxts')" prop="remindDays">
          <el-input
            v-model="param.remindDays"
            oninput="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            type="text"
            class="mr10"
            style="width: 200px"
          />
          <span class="placeholder9 ml10">{{ translate("xthtqzgfw") }}</span>
        </el-form-item>
        <el-form-item :label="translate('chargeConfig')">
          <div class="chargeList">
            <div v-for="item in param.chargeList" :key="item.code" class="item">
              <span>{{ item.name }}：</span>
              <el-input
                v-model="item.value"
                oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
                class="w200"
                placeholder=""
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="translate('memberDis')">
          <el-switch
            v-model="param.isDiscount"
            active-value="1"
            inactive-value="0"
          />
          <span
            class="placeholder9 ml10"
          >{{ translate("bthyxsbtzk") }}{{ translate("toFixed1") }}</span>
          <div v-if="param.isDiscount == '1'" class="placeholder9">
            {{ translate("defaultsf") }}
          </div>
          <div v-if="param.isDiscount == '1'" class="disList">
            <div v-for="item in param.discountList" :key="item.id" class="item">
              <div class="label">
                <span>{{ item.cardName }}：</span>
                <el-checkbox
                  v-model="item.isCharge"
                  true-label="1"
                  false-label="0"
                >{{ translate("charge") }}
                </el-checkbox>
                <span v-if="item.isCharge == '1'">
                  {{ translate("enjoyDis") }}</span>
              </div>
              <el-input
                v-if="item.isCharge == '1'"
                v-model="item.discount"
                maxlength="3"
                onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{1,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
                oninput="if(value<0||value>10) { value = ''} else {value=value.replace(/[^\d.]/g, '').replace(/\.{1,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')}"
                class="w200"
                :placeholder="translate('qsrnr')"
              >
                <template slot="append">{{ translate("disUnit") }}</template>
              </el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="translate('fwktjsy')">
          <quill-editor ref="myTextEditor" v-model="param.context" :placeholder="translate('qsrnr')" class="myQuillEditor" :options="quillOption" />
          <!-- <WangEditor
            :value="param.context"
            @input="(e) => $set(param, 'context', e)"
          /> -->
        </el-form-item>
      </template>

      <el-form-item v-if="meta.indexOf('commonConfigEdit') > -1">
        <el-button
          v-preventReClick
          :loading="subLoading"
          type="primary"
          @click="onSubmit"
        >{{ translate("save") }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { wonderfulMomentsEdit, wonderfulMomentsDetail } from '@/api'
// import WangEditor from '@/components/quillOption'
import { quillEditor } from 'vue-quill-editor'
import quillConfig from '@/api/sc.js'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    // WangEditor,
    quillEditor
  },
  data() {
    return {
      param: {
        discountList: [],
        chargeList: []
      },
      quillOption: quillConfig,
      subLoading: false,

      rulers: {
        isCharge: [
          { required: true, trigger: 'change', message: this.translate('chargeFlagPlace') }
        ],
        isDiscount: [
          { required: true, trigger: 'change', message: this.translate('memberDisPlace') }
        ],
        remindDays: [{ required: true, trigger: 'blur', message: this.translate('placeInput') }],
        trailDays: [{ required: true, trigger: 'blur', message: this.translate('placeInput') }]
      },
      meta: []
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getPz()
  },
  methods: {
    onSubmit() {
      const param = JSON.parse(JSON.stringify(this.param))
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (param.discountList.length > 0) {
            let count = 0
            let count2 = 0
            param.discountList.forEach(item => {
              if (item.isCharge === '1' && item.discount == '0') {
                count++
              }
              if (item.isCharge === '1' && !item.discount) {
                count2++
              }
              if (item.discount) {
                item.discount = item.discount * 0.1.toFixed(1)
              }
            })
            if (count > 0) {
              return this.$message.warning(this.translate('hyzkbsz'))
            }
            if (count2 > 0) {
              return this.$message.warning(this.translate('sfhyzkbk'))
            }
          }
          if (param.isCharge === '1' && param.chargeList && param.chargeList.length > 0) {
            let count = 0
            param.chargeList.forEach(item => {
              if (!item.value) {
                count++
              }
            })
            if (count > 0) {
              return this.$message.warning(this.translate('sfpzbk'))
            }
          }
          this.subLoading = true
          wonderfulMomentsEdit({ param })
            .then((res) => {
              this.subLoading = false
              // console.log(res)
              if (res.errorCode === '000000') {
                this.$message.success(this.translate('editcg'))
                this.getPz()
              }
            })
            .catch((er) => {
              this.subLoading = false
              console.log(er)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getPz() {
      wonderfulMomentsDetail({
        param: {}
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            const obj = res.record
            this.param = obj
            this.param.discountList.forEach(item => {
              if (item.discount) {
                item.discount = item.discount * 10
              }
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.chargeList {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  .item {
    width: calc(50% - 10px);
    margin-bottom: 10px;
    margin-right: 10px;
    display: flex;
    .label {
      width: 100px;
    }
  }
}
.disList {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: calc(50% - 10px);
    margin-bottom: 10px;
    margin-right: 10px;
    display: flex;
    .label {
      width: 200px;
    }
  }
}
</style>
